@import url(../utilities.css);

.NavBar-container {
	padding: var(--s) var(--m);
	background-color: var(--primary-light);
	color: var(--content-light);
	display: flex;
}

.NavBar-title {
	font-size: 20px;
	font-weight: bold;
}

.NavBar-login {
	margin-left: auto;
	margin-right: var(--s);
}

.NavBar-link {
	color: inherit;
	opacity: 0.6;
	font-size: 20px;
	text-decoration: none;
	padding: var(--s) var(--m);
	transition: opacity 0.7s;
}

.NavBar-link:hover {
	opacity: 0.9;
	text-decoration: none;
	transition: opacity 0.5s;
}

.user-info {
	display: flex;
	flex-direction: row;
	margin-left: auto;
	margin-right: 20px;
	font-size: 20px;
	opacity: 0.6;
	transition: opacity 0.7s;
	align-items: center;
	text-align: center;

	.logo {
		padding: 0;
		margin-right: var(--m);
		display: inline-block;
		width: 39px;
		height: 39px;
		border-radius: 5%;
		background: url("../pictures/logo.png") no-repeat center / 190% auto;
	}

	.user-name {
		margin-right: 20px;
		vertical-align: middle;
	}

	.user-logout {
		vertical-align: middle;
		overflow: hidden;
		cursor: pointer;
	}
}

@media (prefers-color-scheme: dark) {
	.NavBar-container {
		background-color: var(--primary-dark);
		color: var(--content-dark);
	}
}
